<template>
  <view class="">
    <button @click="startRecording">开始录像</button>
    <button @click="stopRecording">停止录像</button>
  </view>
</template>

<script>
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  export default {
    data() {
      return {
        recorder: null, // 录像机对象
        isRecording: false,
      }
    },
    onReady() {
      // 初始化摄像头上下文
      // this.cameraContext = uni.createCameraContext()
      this.cameraContext = plus.camera.getCamera()
    },
    methods: {
      startRecording() {
        if (this.isRecording) return
        console.log(123)

        const self = this
        plus.camera.getCamera({
          position: 'front', // 前置摄像头
          onSuccess: function (camera) {
            var config = {
              format: 'mp4', // 指定录像文件的格式
              quality: 1, // 录像质量
              maxDuration: 30, // 最大录像时长（秒）
            }
            self.recorder = cameraContext.startRecorder(config) // 开始录像
            self.isRecording = true
          },
          onError: function (error) {
            console.error('摄像头启动失败: ' + error.message)
          },
        })
      },
      stopRecording() {
        if (!this.isRecording || !this.recorder) return

        this.recorder.stop() // 停止录像
        this.recorder = null
        this.isRecording = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    .authentication-content {
      padding: 52rpx 44rpx;
      .title {
        margin-bottom: 30rpx;
        font-size: 28rpx;
        font-weight: 700;
      }
      .content {
        margin-bottom: 46rpx;
        font-size: 28rpx;
        color: #9b9b9d;
      }
      .Information {
        display: flex;
        align-items: center;
        .uni-input {
          height: 80rpx;
          padding: 20rpx;
          width: 100%;
          box-sizing: border-box;
          border-radius: 12rpx;
          background-color: #f6f6f6;
          font-size: 28rpx;
          line-height: 80rpx;
        }
      }
      .button {
        width: 380rpx;
        height: 84rpx;
        margin: 0 auto;
        border-radius: 42rpx;
        background-color: $all-color;
        line-height: 84rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: 700;
        color: #3d3d3d;
      }
    }
  }
  camera {
    width: 420rpx;
    height: 420rpx;
    border-radius: 50%;
  }
</style>
